<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
      function listToTree(oldArr){
    oldArr.forEach(element => {
        let parent = element.parent;

    if(parent !== 0){
      oldArr.forEach(ele => {
        if(ele.id == parent){ 
          if(!ele.children){
            ele.children = [];
          }
          ele.children.push(element);
        }
      });
    }
  });
    let newArr=[]
      oldArr.forEach(item=>{
        if(!item.parent){
        newArr.push(item)
        }
    })
  return newArr;
}

const arr = [{
                id: 2,
                content: 'CORS',
                parent: 1
            },
            {
                id: 3,
                content: 'Axios',
                parent: 1
            },
            {
                id: 5,
                content: '~',
                parent: 6
            },
            {
                id: 1,
                content: 'jscontext'
            },
            {
                id: 6,
                content: 'Event Loop'
            },
            {
                id: 9,
                content: 'webpack/rollup',
                parent: 5
            },
            {
                id: 7,
                content: 'Serverless',
                parent: 3
            }
        ];
        let resut = listToTree(arr);
    </script>
</body>

</html>